/**
 * Tyler Gordon .me
 * Site styles
 * --------------------------------------------------
 * [Base, Layout, Module, State, Theme] ~ SMACSS
 * --------------------------------------------------
 */

// Google Web Fonts
// --------------------------------------------------
//@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic);
@import url(http://fonts.googleapis.com/css?family=Bitter:400,400italic,700,700italic);

// Includes
// --------------------------------------------------
@import 'liriope_goodies';
@import 'settings',
        'base',
        'layouts',
        'typography',
        'header',
        'nav',
        'contact-info',
        'site-content',
        'cv',
        'portfolio-nav'
        ;

@import '/vendor/icomoon/style.css';

body {
    background: #fff url('/images/frenchstucco.png') repeat;
}

/**
 * Homepage
 */
.homepage__welcome {
    border-bottom: toREM(4px) solid $black;
    @include rem(padding-bottom, $unit);

    h1 {
        font-weight: normal;
        span{
            font-style: italic;
            font-weight: bold;
            color: $color1;
        }
    }

    .em {
        font-family: $fontStackAlt;
        color: $color1;
        font-weight: bold;
        white-space: nowrap;
    }
}

.homepage__portfolio {
    @include rem(margin-top, $unit *1);
}

.portfolio__item-title {
    @include rem(font-size, $unit);
    font-weight: bold;
    margin-bottom: 0;
}

.portfolio__item-terms {
    font-family: $fontStackAlt;
    font-style: italic;
    margin-top: 0;
}

.resume__section {
    .section__heading {
        color: $color1;
        font-family: $fontStackAlt;
        font-weight: bold;
        text-transform: uppercase;
    }
    .section__items {
        .row:hover {
            background-color: lighten($color2, 60%);
        }
        .item__intro {
            text-align: right;
            color: $color2;
            strong {
                display: block;
                clear: both;
                white-space: nowrap;
            }
        }
        .item__description {
        }
    }
}
@media screen and (max-width: $canvasLarge - 1) {
    .resume__section {
        .section__items {
            .item__intro {
                text-align: left;
            }
        }
    }
}

/**
 * Helpers
 */
h1.section {
    @include rem(font-size, $unit *1.5);
    @include rem(padding-bottom, $unit);
    @include rem(margin-top, $unit);
    font-weight: normal;
    text-transform: uppercase;
    border-bottom: 1px solid $black;
}

.drophead {
    @include rem(font-size, $unit *1.5);
}

// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
// MEDIA QUERIES
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //

@media screen and (max-width: $canvasMedium - 1) {
    body {
        width: $canvasSmall;
    }
}

@media screen and (min-width: $canvasMedium) and (max-width: $canvasLarge - 1) {
  body {
    width: $canvasMedium;
  }
}

@media screen and (min-width: $canvasLarge) {
  body {
    width: $canvasLarge;
  }
}
